<script setup>
  import {ref} from "vue"
  let isVisible = ref(false)
</script>

<template>
  <div class="panel">
    <h4>可折叠面板</h4>
    <div class="title">
      <strong>自由与爱情</strong>
      <span class="btn" @click="isVisible = !isVisible">
        {{isVisible ? "收起" : "展开"}}
      </span>
    </div>
    <div class="content" v-show="isVisible">
      <p>生命诚可贵，</p>
      <p>爱情价更高。</p>
      <p>若为自由故，</p>
      <p>两者皆可抛。</p>
    </div>
  </div>
</template>

<style>
  body {
    /* 设置背景颜色 */
    background-color: rgb(204, 204, 204);
    box-sizing: border-box;
  }
  #app {
    width: 500px;
    border: 3px solid #055e11;
    box-shadow: 4px 4px 8px 2px rgba(0,0,0, 0.5);
    border-radius: 1em;
    background-color: #fff;
  }
  .panel {
    /* 1.设置内边距 */
    padding: 1em 2em 1em;
  }
  .panel h4{
    text-align: center;
  }
  .panel .title {
    /* 1.设置弹性布局 */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* 2.设置边框 */
    border: 1px #bbb solid;
    /* 3.设置内边距 */
    padding: 2px 1em 2px;
  }
  .panel .btn {
    /* 1.设置点击 */
    cursor: pointer;
  }
  .panel .content {
    /* 1.设置边框 */
    border: 1px #bbb solid;
    border-top: transparent;
    /* 2.设置内边距 */
    padding: 2px 1em 2px;
  }

</style>

